<template>
  <div>


  <div class="view">
    <!-- <h1>请输入验证码</h1> -->
    <!-- <h2>验证码已发送至手机：<text class="yellow">{{mobile}}</text></h2> -->
    <input class="mobile" maxlength="11" placeholder-style="color: #777;font-weight: 300;" type="number" v-model="Value" placeholder="请输入验证码"/>
    <div style="text-align: left">
      <text class="tip3" v-if="count < 59">{{count}}s 后可重新发送</text>
      <text class="tip3" v-if="count == 59" @click="getmsg" style="color: #333">重新发送</text>
    </div>
    <button :class="isPass ? 'btn pass':'btn'" @click="next" :disabled="!isPass">下一步</button>
    <!-- <input type="text" v-model="mobile" style="display: none"/>
    <div class='flex1'>
      <ul v-for="(item,index) in Length" :key="index">
        <li class='y1' @click='Tap(1)'>{{showValue[index]}}</li>
      </ul>
    </div>
    <input type="number" class='ipt' maxlength="4" v-model="Value" :focus="isFocus">
    <div class="mark" v-if="isFocus" @click='Tap(2)'></div> -->
    <div class="tip">
      <p class="tip1">注册登录即表示阅读并同意</p>
      <p class="tip2" @click="safe">考拉出行<span>《法律条款及隐私政策》</span></p>
    </div>

  </div>
  <div v-show="componUser" style="left: 0; right: 0; z-index: 88;  bottom: 0; position:fixed; top :0px;background-color:#000;background: rgba(0, 0, 0, 0.5);text-align:center">
    <div class=" compon" >
      <text>抱歉，企业用户暂不支持小程序用车,</text><br/>
      <text>请前往APP用车!</text>
      <button class="btn know pass fix" @click="know">我知道了</button>
    </div>
  </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'
  export default {
    data () {
      return {
        isFocus: false,
        Length: 4,
        count: 60,
        Value: '',
          showValue:'',
        mobile: '',
        isPass: true,
        countfun: null,
        componUser: false,
        addFamily: '',
        familyMobile: '',
        isPass:false
      }
    },
    watch: {
      mobile(val,old){
        clearInterval(this.countfun)
        if(val == old && this.count != 59){

        }
        if(val == old && this.count == 59){
          this.getmsg()
        }
        if(val != old){
          this.count = 59
          this.getmsg()
        }
      },
      Value(val) {
        if(val.length==4){
          this.isPass = true
        }
      }
    },
    onLoad(option){
      this.componUser=false
      if(this.count == 59){
        this.getmsg()
      }
      if (option.addFamily) {
        this.addFamily = option.addFamily
        this.familyMobile = option.familyMobile
        this.mobile = wx.getStorageSync('userInfo').mobile
      }else {
        this.mobile = option.mobile
      }
    },
    onShow() {
        this.Tap(1)
    },
    methods: {
      safe() {
        wx.redirectTo({
          url: '/pages/rules/main',
        })
      },
      know(){
        this.componUser = false
      },
      next() {
        if (this.addFamily == '1') { //绑定亲情卡
          let params = {mobile:this.familyMobile,code:this.Value}
          Service.boundFamilyCard(params)
            .then((res) => {
              if (res.code == 200) {
                wx.redirectTo({
                  url: `../familyAccountList/main`
                })
                this.count = 59
                clearInterval(this.countfun)
              }
            })
        } else {  //  正常登陆
          let params = {mobile:this.mobile,code:this.Value}
          Service.login(params).then(res=>{
            if(res.code == 200){
              if(!res.data.companyLogo) { //没有companyLogo 为非企业用户
                this.componUser = false
                wx.showToast({
                  title: '登录成功',
                  icon: 'success',
                  duration: 2000
                });

                wx.setStorageSync('userInfo', res.data);

                if (res.data.depositStatus == 3) {
                  wx.redirectTo({
                    url: `../deposit/main`
                  })
                } else {
                  setTimeout(() => {
                    wx.reLaunch({
                      url: `../index/main`
                    })
                  }, 200)
                }
              }else{
                this.componUser = true
                this.count = 59
                clearInterval(this.countfun)
              }
            }else {
                this.Value = ''
            }
          })
        }
      },
      getmsg(){
        this.Value = ''
        this.Tap(1)
        let params = {mobile:this.mobile}
        Service.getMessage(params).then(res=>{
          if(res.code ==200||res.code ==405){
            if(this.count !==0){
              clearInterval(this.countfun)
            }
            this.countfun = setInterval(()=>{
              if(this.count > 0){
                this.count --
              }else{
                this.count = 59
                clearInterval(this.countfun )
              }
            },1000)
          }else{
            this.count = 59
            clearInterval(this.countfun )
          }
        })
      },
      Tap(type) {
        if (type == 1) {
          this.isFocus = true
        } else {
          this.isFocus = false
        }
      },
      formSubmit(e){
      },
      inputMobile(e){
        let phone = e.target.value
        if(/^1[3456789]{1}\d{9}$/.test(phone) == false) {
          this.isPass = true
        }else{
          this.isPass = false
        }
      }
    }

  }
</script>

<style scoped>
  page{
    position: relative;
  }

  .view {
    padding: 0;
  }
  .mobile {
    margin: 170px 0 0;
    padding-left: 80px;
    width: 100%;
    height: 68px;
    line-height: 54px;
    border-bottom: 2px solid #ddd;
    color: #333;
    font-size: 40px;
  }

  .tip{
    margin: 300px auto 0;
    text-align: left;
    width: 430px;
  }
  .tip1{
    height:37px;
    font-size:28px;
    font-weight:400;
    color:#333333;
    line-height:37px;
  }
  .tip2{
    padding-top: 20px;
    font-size: 28px;
    line-height: 37px;
    color: #333333;
  }
  .tip2 span{
    color: #333333;
    text-decoration: underline;
  }

  .tip3{
    margin-bottom: 120px;
    padding-left: 80px;
    height:37px;
    font-size:26px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:37px;
  }
  .view{
    position: relative;
  }
  .know{
    width: 50%;
    left: 50%;
    bottom: -40rpx;
    transform: translate(-50%,-50%);
  }
  .compon{
    position: fixed;
    width: 70%;
    padding: 80rpx 20rpx 30rpx;
    height: 300rpx;
    z-index: 99;
    color: #333;
    left: 50%;
    right: 0;
    top: 50%;
    background: #fff;
    border: 1px solid #f7f7f7;
    border-radius: 20rpx;
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: 30rpx;

  }

  .y1{
    width: 125px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border-bottom: 2px solid #DDDDDD;
    font-size: 56px;
    font-weight: bold;
  }
  .ipt {
    width: 0;
    height:0;
  }
  .ipt2{
    width: 100%;
    height: 115px;
  }
  .mark{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    z-index: 1;
  }

</style>
